<template>
	<div class="full-screen-table">
		<el-row>
			<el-col :span="8"><label>请输入用户名</label></el-col>
			<el-col :span="8"><el-input v-model="searchName"></el-input></el-col>
			<el-col :span="8">
				<el-button type="danger" size="large" @click="searchUser">搜索</el-button>
				<el-button type="primary" size="large" @click="showAddDialog">新增用户</el-button>
			</el-col>
		</el-row>
		<el-table :data="userlist">
			<el-table-column prop="uid" label="用户编号" width="200"></el-table-column>
			<el-table-column prop="uname" label="用户名" width="200"></el-table-column>
			<el-table-column prop="upwd" label="用户密码" width="200"></el-table-column>
			<el-table-column prop="ustatus" label="状态" width="100">
				<template #default="scope">
					<el-tag :type="scope.row.ustatus === 0 ? 'success' : 'danger'">
						{{ scope.row.ustatus === 0 ? '启用' : '禁用' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="right" label="操作" width="150">
				<template #default="scope">
					<el-button size="small" @click="editRow(scope.$index,scope.row)">编辑</el-button>
					<el-button size="small" type="danger" @click="deleteRow(scope.$index,scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 新增用户对话框 -->
		<el-dialog v-model="addDialogVisible" title="新增用户" width="30%">
			<el-form :model="newUser" label-width="100px">
				<el-form-item label="用户名">
					<el-input v-model="newUser.uname"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="newUser.upwd" type="password"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-switch
						v-model="newUser.ustatus"
						:active-value="1"
						:inactive-value="0"
						active-text="启用"
						inactive-text="禁用"
					></el-switch>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="addDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="addUser">确定</el-button>
			</template>
		</el-dialog>

		<!-- 编辑用户对话框 -->
		<el-dialog v-model="editDialogVisible" title="编辑用户" width="30%">
			<el-form :model="editUser" label-width="100px">
				<el-form-item label="用户ID">
					<el-input v-model="editUser.uid" disabled></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="editUser.uname"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="editUser.upwd" type="password"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-switch
						v-model="editUser.ustatus"
						:active-value="1"
						:inactive-value="0"
						active-text="启用"
						inactive-text="禁用"
					></el-switch>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="editDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="updateUser">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	import { ref } from 'vue'
	export default {
		data() {
			return {
				userlist: [],
				searchName: '',
				addDialogVisible: false,
				editDialogVisible: false,
				newUser: {
					uname: '',
					upwd: '',
					ustatus: 1
				},
				editUser: {
					uid: '',
					uname: '',
					upwd: '',
					ustatus: 1
				}
			}
		},
		created() {
			this.ref()
		},
		methods: {
			showAddDialog() {
				this.addDialogVisible = true
				this.newUser = {
					uname: '',
					upwd: '',
					ustatus: 1
				}
			},
			addUser() {
				axios.post("http://127.0.0.1:9999/v2/user/user", this.newUser, {
					headers: {
						uname: "zhangsan",
						token: "123456987654321"
					}
				}).then(res => {
					if (res.data.code === 0) {
						this.$message.success('添加成功')
						this.ref()
						this.addDialogVisible = false
					} else {
						this.$message.error(res.data.msg)
					}
				}).catch(error => {
					this.$message.error('添加失败')
				})
			},
			editRow(index, row) {
				this.editDialogVisible = true
				this.editUser = {
					uid: row.uid,
					uname: row.uname,
					upwd: row.upwd,
					ustatus: row.ustatus
				}
			},
			updateUser() {
				axios.put("http://127.0.0.1:9999/v2/user/user", this.editUser, {
					headers: {
						uname: "zhangsan",
						token: "123456987654321"
					}
				}).then(res => {
					if (res.data.code === 0) {
						this.$message.success('修改成功')
						this.ref()
						this.editDialogVisible = false
					} else {
						this.$message.error(res.data.msg)
					}
				}).catch(error => {
					this.$message.error('修改失败')
				})
			},
			searchUser() {
				axios.get("http://127.0.0.1:9999/v2/user/getuserlist", {
					params: {
						uname: this.searchName
					}
				}).then(res => {
					if (res.data.code == 0) {
						this.userlist = res.data.data
					} else {
						this.$message.error("搜索失败")
					}
				}).catch(res => {
					this.$message.error(JSON.stringify(res))
				})
			},
			ref: function() {
				var that = this
				axios.get("http://127.0.0.1:9999/v2/user/getuserlist", {
					params: {
					},
					headers: {
						uname: "zhangsan",
						token: "123456987654321"
					}
				}).then(res => {
					if (res.data.code == 0) {
						that.userlist = res.data.data
					} else {
						alert("网络错误！")
					}
				}).catch(res => {
					alert(JSON.stringify(res))
				})
			},
			deleteRow(index, row) {
				console.log("删除id为：", row.uid)
				axios.delete("http://127.0.0.1:9999/v2/user/user/" + row.uid, {
					headers: {
						uname: "zhangsan",
						token: "123456987654321"
					}
				}).then(res => {
					alert(res.data.msg)
					if (res.data.code == 0) {
						this.ref()
					}
				}).catch(res => {
					alert(JSON.stringify(res.data.msg))
				})
			}
		}
	}
</script>

<style>
	.full-screen-table {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background-color: white;
		padding: 20px;
		box-sizing: border-box;
	}
</style>